<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script src="./js/echarts.min.js"></script>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <blockquote class="layui-elem-quote">欢迎管理员：
                            <span class="x-red" id="adminName"></span>！当前时间:<span id="time"></span>
                        </blockquote>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card-header">数据统计</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-xs6 layui-col-md3">
                            <div class="layui-card">
                                <div class="layui-card-header">
                                    管理数<span class="layui-badge layui-bg-blue pull-right">总</span>
                                </div>
                                <div class="layui-card-body">
                                    <p class="lay-big-font" id="adminNum">0</p>
                                    <p style="text-align: right;"><i class="layui-icon layui-icon-flag"></i></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-md3">
                            <div class="layui-card">
                                <div class="layui-card-header">
                                    澡堂数<span class="layui-badge layui-bg-black pull-right">总</span>
                                </div>
                                <div class="layui-card-body">
                                    <p class="lay-big-font" id="regionNum">0</p>
                                    <p style="text-align: right;"><i
                                            class="layui-icon layui-icon layui-icon-rate"></i></span></p>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-md3">
                            <div class="layui-card">
                                <div class="layui-card-header">
                                    预约数<span class="layui-badge layui-bg-green pull-right">总</span>
                                </div>
                                <div class="layui-card-body">
                                    <p class="lay-big-font" id="orderNum">0</p>
                                    <p style="text-align: right;"><i class="layui-icon layui-icon-read"></i></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-md3">
                            <div class="layui-card">
                                <div class="layui-card-header">
                                    活跃用户<span class="layui-badge layui-bg-orange pull-right">总</span>
                                </div>
                                <div class="layui-card-body">
                                    <p class="lay-big-font" id="userNum">0</p>
                                    <p style="text-align: right;"><i class="layui-icon layui-icon-user"></i></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div>
                <div>
                    <div class="layui-fluid">
                        <div class="layui-row layui-col-space15">
                            <div class="layui-col-sm12 layui-col-md6">
                                <div class="layui-card">
                                    <div class="layui-card-header">最新一周新增用户</div>
                                    <div class="layui-card-body" style="min-height: 280px;">
                                        <div id="newUserNum" class="layui-col-sm12" style="height: 300px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-sm12 layui-col-md6">
                                <div class="layui-card">
                                    <div class="layui-card-header">澡堂状态</div>
                                    <div class="layui-card-body" style="min-height: 280px;">
                                        <div id="regionState" class="layui-col-sm12" style="height: 300px;"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="layui-col-sm12 layui-col-md6">
                                <div class="layui-card">
                                    <div class="layui-card-header">三餐菜谱</div>
                                    <div class="layui-card-body" style="min-height: 280px;">
                                        <div id="main3" class="layui-col-sm12" style="height: 300px;"></div>

                                    </div>
                                </div>
                            </div> -->
                            <div class="layui-col-sm12 layui-col-md6">
                                <div class="layui-card">
                                    <div class="layui-card-header">cpu使用量</div>
                                    <div class="layui-card-body" style="min-height: 280px;">
                                        <div id="upuUse" class="layui-col-sm12" style="height: 300px;"></div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div style="display: flex;justify-content: space-around;">
                <div style="flex:0 0 33%;background-color: #ffffff;">
                    <div class="layui-card-header">后台框架</div>
                    <div class="layui-card-body">
                        <table class="layui-table layui-text">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td>核心框架</td>
                                    <td>NodeJs、MVC、express</td>
                                </tr>
                                <tr>
                                    <td>持久层</td>
                                    <td>mysql、json</td>
                                </tr>
                                <tr>
                                    <td>后台核心</td>
                                    <td>JS、Css、Es6、layui、Html5</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div style="flex:0 0 33%;background-color: #ffffff;">
                    <div class="layui-card-header">前端框架</div>
                    <div class="layui-card-body">
                        <table class="layui-table layui-text">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td>核心框架</td>
                                    <td>Uniapp、小程序api</td>
                                </tr>
                                <tr>
                                    <td>核心技术</td>
                                    <td>JS、Css、Es6、layui、Html5</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div style="flex:0 0 33%;background-color: #ffffff;">
                    <div class="layui-card-header">开发团队</div>
                    <div class="layui-card-body">
                        <table class="layui-table layui-text">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td>团队成员</td>
                                    <td>******</td>
                                </tr>
                                <tr>
                                    <td>项目耗时</td>
                                    <td>2个月</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

</body>
<script>
    layui.use(['carousel', 'element', 'jquery'], function () {
        let $ = layui.jquery
        let adminInfo = layui.sessionData('admin').info
        console.log(adminInfo.username)
        $('#adminName').text(adminInfo.username)
        $('#time').text(dateFormat("YYYY-mm-dd HH:MM", (new Date())))
        $.ajax({
            type: "Get",
            url: "/getIndexCount",
            dataType: "json",
            success: (res) => {
                let data = res;
                if (data.code) {
                    $('#adminNum').text(data.adminNum)
                    $('#regionNum').text(data.regionNum)
                    $('#orderNum').text(data.orderNum)
                    $('#userNum').text(data.userNum)
                }
            }
        });
        var newUserNum = echarts.init(document.getElementById('newUserNum'));
        var option = {
            grid: {
                top: '5%',
                right: '1%',
                left: '1%',
                bottom: '10%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '用户量',
                data: [0, 0, 0, 0, 0, 0, 0],
                type: 'line'
            }]
        };
        newUserNum.setOption(option);
        $.ajax({
            type: "Get",
            url: "/getuserNumTable",
            dataType: "json",
            success: (res) => {
                newUserNum.hideLoading();
                if (res.code) {
                    let data = res;
                    newUserNum.setOption({
                        series: [
                            {
                                name: '用户量',
                                data: data.userNum,
                                type: 'line'
                            }
                        ]
                    })
                }
            }
        });


        var upuUse = echarts.init(document.getElementById('upuUse'));
        var option = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                {
                    name: 'cpu使用量',
                    type: 'gauge',
                    detail: { formatter: '{value}%' },
                    data: [{ value: 0, name: '已使用' }]
                }
            ]
        };
        $.ajax({
            type: "Get",
            url: "/getCpuTable",
            dataType: "json",
            success: (res) => {
                upuUse.hideLoading();
                if (res.code) {
                    let data = res;
                    upuUse.setOption({
                        series: [
                            {
                                data: [
                                    { value: Number(data.CpuNum), name: '已使用' }
                                ]
                            }
                        ]
                    })
                }
            }
        });
        upuUse.setOption(option);


        var regionState = echarts.init(document.getElementById('regionState'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#C0FF3E'],
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['使用中', '已预约', '空闲']
            },
            series: [
                {
                    name: '澡堂状态',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    selectedMode: 'single',
                    data: [
                        { value: 0, name: '使用中' },
                        { value: 0, name: '已预约' },
                        { value: 0, name: '空闲' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }

                }
            ]
        };
        regionState.showLoading()
        $.ajax({
            type: "Get",
            url: "/getRegionTable",
            dataType: "json",
            success: (res) => {
                regionState.hideLoading();
                if (res.code) {
                    regionState.hideLoading();
                    if (res.code) {
                        let data = res;
                        regionState.setOption({
                            series: [
                                {
                                    data: data.seriesData
                                }
                            ],
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: data.typeList
                            },
                        })
                    }
                }
            }
        });
        regionState.setOption(option);
    })
</script>

</html>